<jsp:include page="../template/top.jsp"></jsp:include>

	<form action="${pageContext.request.contextPath}/reserva/confirma/checkin" method="post">
	
		<div class="interfaceExterna">
			<h3><a href="#">Reserva</a></h3>
			<div>
				<input type="hidden" name="reserva.id" value="${reserva.id}" />
				<div class="campo">
					<label>Tipo do Apartamento</label>
					<input type="text" name="reserva.apartamento.tipoApartamento.nome" value="${reserva.apartamento.tipoApartamento.nome}" readonly="readonly"/>
				</div>
				
				<div class="campo">
					<label>N&uacute;mero</label>
					<input type="text" name="reserva.apartamento.numero" value="${reserva.apartamento.numero}" readonly="readonly"/>
				</div>
				
				<br clear="all" />
				
				<div class="campo">
					<label>Descri&ccedil;&atilde;o</label>
					<input type="text" style="size: 100px;" name="reserva.apartamento.tipoApartamento.descricao" value="${reserva.apartamento.tipoApartamento.descricao}" readonly="readonly"/>
				</div>
				
				<br clear="all" />
				
				<div class="campo">
					<label>Data de Entrada</label>
					<input type="text" id="dataEntrada" class="datepicker"  name="reserva.dataEntrada" value="<fmt:formatDate value='${reserva.dataEntrada}' pattern='dd/MM/yyyy' />" />
				</div>
				<div class="campo">
					<label>Data de Sa&iacute;da</label>
					<input type="text" id="dataSaida" class="datepicker" name="reserva.dataSaida" value="<fmt:formatDate value='${reserva.dataSaida}' pattern='dd/MM/yyyy' />" />
				</div>
				
			</div>
		</div>
		
		<br clear="all"/>
		
		<div class="interfaceExterna">
			<h3><a href="#">H&oacute;spede</a></h3>
			<div>
				<input type="hidden" name="reserva.hospede.id" value="${reserva.hospede.id}" />
				<div class="campo">
					<label>E-mail</label>
					<input type="text" id="email" name="reserva.hospede.email" value="${reserva.hospede.email}" />
				</div>
				<div class="campo">
					<label>Nome</label>
					<input type="text" id="nome" name="reserva.hospede.nome" value="${reserva.hospede.nome}" />
				</div>
				<div class="campo">
					<label>Pa&iacute;s</label>
					<select id="paises" name="reserva.hospede.pais.id">
						<c:forEach var="pais" items="${paises}">
							<option value="${pais.id}">${pais.nome}</option>
						</c:forEach>
					</select>
				</div>
				<div id="campoCpf" class="campo" style="display: none;">
					<label>CPF</label>
					<input id="cpf" type="text" name="reserva.hospede.cpf" value="${reserva.hospede.cpf}" alt="cpf"/>
				</div>
				<div id="campoPassaporte" class="campo" style="display: none;">
					<label>Passaporte</label>
					<input id="passaporte" type="text" name="reserva.hospede.passaporte" value="${reserva.hospede.passaporte}" />
				</div>
				
				<div class="campo">
					<label>Data de Nascimento</label>
					<input id="dataNascimento" type="text" class="datepicker" name="reserva.hospede.dataDeNascimento" value="<fmt:formatDate value='${reserva.hospede.dataDeNascimento}' pattern='dd/MM/yyyy' />" alt="date" />
				</div>
				
				<br clear="all" />
				
				<div class="campo">
					<label>Telefone</label>
					<input id="telefone" type="text" name="reserva.hospede.telefone" value="${reserva.hospede.telefone}" alt="phone"/>
				</div>
				
				<br clear="all" />
				
			</div>
		</div>
		
		<br clear="all"/>
		
		<div class="botoes">
			<input type="submit" value="Check-in" id="botaoSalvar" />
			<a href="${pageContext.request.contextPath}/reserva/lista" id="botaoVoltar">Voltar</a>
		</div>
	
	</form>

<jsp:include page="../template/bottom.jsp"></jsp:include>
<script type="text/javascript">
$(document).ready(function () {
	function defineDocumento() {
		if($('#paises').val() == '0') {
			$('#campoCpf').css('display', 'block');
			$('#campoCpf').removeAttr('disabled');
			$('#campoPassaporte').css('display', 'none');
			$('#campoPassaporte').attr('disabled', 'disabled');
		} else {
			$('#campoCpf').css('display', 'none');
			$('#campoCpf').attr('disabled', 'disabled');
			$('#campoPassaporte').css('display', 'block');
			$('#campoPassaporte').removeAttr('disabled');
		}
	}
	$('#paises option[value=${reserva.hospede.pais.id}]').attr('selected', 'selected');
	defineDocumento();
	$('#paises').change(defineDocumento);
});
</script>